const React = require('react');
const createReactClass = require('create-react-class');
import PropTypes from 'prop-types'
const {
  View,
    StyleSheet,
    FlatList,
    Text,
    TouchableOpacity
} = require('react-native');
const {
  JDScrollView,
    JDText,
    JDRouter,
    JDButton,
    JDTouchable,
    JDDevice,
    JDIndexFlatList,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;
import FooterComponent from './Footer'
const JDIndexFlatListDemo = createReactClass({
    displayName: 'JDIndexFlatListDemo',
    _layoutYs: {},

    getInitialState() {
        return {
            listData: [{
                title: 'A',
                banners: [1, 2, 3],
            }, {
                title: 'B',
                banners: [1, 2],
            }, {
                title: 'C',
                banners: [1, 2, 3, 4],
            }, {
                title: 'D',
                banners: [1],
            }, {
                title: 'E',
                banners: [1, 2, 3],
            }, {
                title: 'F',
                banners: [1, 2, 3],
            }, {
                title: 'G',
                banners: [1, 2, 3, 4],
            }, {
                title: 'H',
                banners: [1],
            }, {
                title: 'I',
                banners: [1, 2, 3],
            }, {
                title: 'J',
                banners: [1, 2, 3],
            }, {
                title: 'K',
                banners: [1],
            }, {
                title: 'L',
                banners: [1, 2, 3],
            }, {
                title: 'M',
                banners: [1],
            }, {
                title: 'N',
                banners: [1, 2, 3],
            }, {
                title: 'O',
                banners: [1, 2, 3],
            }, {
                title: 'P',
                banners: [1],
            }, {
                title: 'Q',
                banners: [1, 2, 3],
            }, {
                title: 'R',
                banners: [1, 2, 3],
            }, {
                title: 'S',
                banners: [1, 2, 3],
            }, {
                title: 'T',
                banners: [1, 2, 3, 4],
            }, {
                title: 'U',
                banners: [1, 2, 3],
            }, {
                title: 'V',
                banners: [1, 2, 3],
            }, {
                title: 'W',
                banners: [1],
            }, {
                title: 'X',
                banners: [1, 2, 3],
            }, {
                title: 'Y',
                banners: [1, 2],
            }, {
                title: 'Z',
                banners: [1, 2, 3],
            }],
            currentIndex: 0,
        }
    },

    render() {
        let tabs = this.state.listData.map((item) => {
            return item.title
        })
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="JDIndexFlatList" />
                <JDIndexFlatList
                    
                    stickBarData = {tabs}
                    style={styles.wrapper}
                    contentContainerStyle={styles.contentContainerStyle}
                    data={this.state.listData}
                    renderItem={this._renderRow}
                    keyExtractor={this._keyExtractor}
                    ListFooterComponent={FooterComponent}
                    stickyBarContainerStyle={{backgroundColor: '#aaa',}}
                    stickyBarHighlightStyle={{backgroundColor: '#777',}}
                    stickyBarTextStyle={{color:'#FFF',fontSize: JDDevice.getRpx(28),}}
                />
            </View>
        );
    },

    _keyExtractor(item, index) {
        return String(index);
    },

    _renderRow({ item, index }) {
        return (
            <View style={styles.wrapper}>
                <View style={styles.header}>
                    <Text style={styles.title}>{item.title}</Text>
                </View>
                <View style={styles.items}>
                    {item.banners.map((sItem, sIndex) => (
                        <View style={styles.item}
                            key={sIndex}
                        >
                        </View>
                    ))}
                </View>
            </View>
        );
    },
});

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
    },
    contentContainerStyle: {
        backgroundColor: 'rgba(0, 0, 0, 0.1)',
    },
    header: {
        paddingBottom: 0,
        paddingTop: JDDevice.getRpx(60),
    },
    title: {
        textAlign: 'center',
        fontSize: JDDevice.getRpx(30),
        color: '#222222',
    },
    items: {
        flex: 1,
        alignItems: 'center',
        flexWrap: 'wrap',
        flexDirection: 'row',
    },
    item: {
        width: JDDevice.getRpx(200),
        height: JDDevice.getRpx(150),
        backgroundColor: '#429af7',
        marginLeft: 5,
        marginTop: 10,
    },

    row: {
        height: 100,
        borderColor: '#F00',
        borderWidth: 1,
        marginVertical: 10,
    }
});

module.exports = JDIndexFlatListDemo;



